
 <template>
  <div class="management">
    <div class="sibian flex">
      <img src="../assets/zdfury.png" alt="" style="width:.22rem;height:.22rem;">
      <span style="padding-left:0.12rem;">重点管理人员</span>
    </div>
    <div id="manageEcharts" style="width:100%;height:1.9rem;background: #03123D;"></div>
    <div class="sibian flex dd">
      <img src="../assets/zdfury.png" alt="" style="width:.22rem;height:.22rem;">
      <span style="padding-left:0.12rem;">外籍人员</span>
    </div>
    <div  id="manageEcharts1" style="width:100%;height:2rem;background: #03123D;"></div>
    <service  :isShow="dialogFormVisible" @close="closeDialog" :titleDialog="titles"></service>
  </div>
  <!-- 重点管理人员 -->
</template>
 
 <script>
import service from '@/components/managePeople';
import {ManagementPopulation,ForeignPopulation} from '@/api/index.js';
const echarts = require('echarts');
import xmsf from '../assets/xmsf.png';
import sfry from '../assets/sfry.png';
import shjz from '../assets/shjz.png';
import jdry from '../assets/jdry.png';
import jsza from '../assets/jsza.png';
export default {
  data() {
    return {
      dialogFormVisible: false,
      echarts9: null,
      echarts10: null,
      xmsf,
      titles: '',
      sfry,
      shjz,
      jdry,
      jsza,
      echartDatas:[],
      echart:[],
      echartName:[],
      echartNum:[]
    };
  },
  components: {
    service,
  },
  mounted() {
    this.echarts9 = echarts.init(document.getElementById('manageEcharts'));
    this.echarts10 = echarts.init(document.getElementById('manageEcharts1'));
    this.drawPies1();
    this.drawBars1();
  },
  methods: {
    closeDialog() {
      this.dialogFormVisible = false;
    },
  async drawPies1() {
      try {
        const{data}  = await ManagementPopulation()
        console.log(data)
         this.echartDatas=data.date
        // console.log(this.echartDatas);
      } catch (error) {
        console.log(error)
      }
      var colorList = ['#FFF', '#025CD6', '#8EF51F', '#E70012', '#632673'];
      var sportsIcon = {
        a: this.xmsf,
        b: this.sfry,
        c: this.shjz,
        d: this.jdry,
        e: this.jsza,
      };
      let self = this;
      this.$nextTick(() => {
        self.echarts9.setOption({
          grid: {
            bottom: 150,
            left: 0,
            right: '10%',
          },
          legend: {
            show: false,
            orient: 'vertical',
            top: 'middle',
            right: '5%',
            textStyle: {
              color: '#f2f2f2',
              fontSize: 13,
            },
            icon: 'roundRect',
          },
          series: [
            // 主要展示层的
            {
              roseType: 'radius',
              radius: ['10%', '45%'],
              center: ['50%', '43%'],
              type: 'pie',
              itemStyle: {
                normal: {
                  color: function(params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              labelLine: {
                normal: {
                  show: true,
                  length: 15,
                  length2: 20,
                  lineStyle: {
                    color: '#d3d3d3',
                  },
                  align: 'right',
                },
                color: '#000',
                emphasis: {
                  show: true,
                },
              },
              label: {
                normal: {
                  formatter: function(params) {
                    var str = '';
                    switch (params.name) {
                      case '戒毒人员':
                        str = '{a|}\n{nameStyle|戒毒人员 }' + '{rate|' + params.value + '}';
                        break;
                      case '刑满释放人员':
                        str = '{b|}\n{nameStyle|刑满释放人员 }' + '{rate|' + params.value + '}';
                        break;
                      case '精神障碍人员':
                        str = '{c|}\n{nameStyle|精神障碍人员 }' + '{rate|' + params.value + '}';
                        break;
                      case '社会矫正人员':
                        str = '{d|}\n{nameStyle|社会矫正人员 }' + '{rate|' + params.value + '}';
                        break;
                      case '上访人员':
                        str = '{e|}\n{nameStyle|上访人员 }' + '{rate|' + params.value + '}';
                        break;
                    }
                    return str;
                  },

                  rich: {
                    a: {
                      width: 18,
                      height: 18,
                      lineHeight: 28,
                      backgroundColor: {
                        image: sportsIcon.e,
                      },
                      align: 'left',
                    },
                    b: {
                      width: 18,
                      height: 18,
                      lineHeight: 28,
                      backgroundColor: {
                        image: sportsIcon.d,
                      },
                      align: 'left',
                    },
                    c: {
                      width: 18,
                      height: 18,
                      lineHeight: 28,
                      backgroundColor: {
                        image: sportsIcon.c,
                      },
                      align: 'left',
                    },
                    d: {
                      width: 18,
                      height: 18,
                      lineHeight: 28,
                      backgroundColor: {
                        image: sportsIcon.b,
                      },
                      align: 'left',
                    },
                    e: {
                      width: 18,
                      height: 18,
                      lineHeight: 27,
                      backgroundColor: {
                        image: sportsIcon.a,
                      },
                      align: 'left',
                    },
                    nameStyle: {
                      fontSize: 10,
                      color: '#D8DEEE',
                      align: 'left',
                    },
                    rate: {
                      fontSize: 10,
                      color: '#D8DEEE',
                      align: 'left',
                    },
                  },
                },
              },
               data:this.echartDatas
                // [
              //   {
              //     value: 17,
              //     name: '戒毒人员',
              //   },
              //   { value: 23, name: '刑满释放人员' },
              //   { value: 27, name: '精神障碍人员' },
              //   { value: 33, name: '社会矫正人员' },
              //   { value: 9, name: '上访人员' },
              // ],
            },
            // 边框的设置
            {
              radius: ['55%', '50%'],
              center: ['49%', '43%'],
              type: 'pie',
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              animation: false,
              tooltip: {
                show: false,
              },
              itemStyle: {
                normal: {
                  color: '#0808F2',
                },
              },
              data: [
                {
                  value: 1,
                },
              ],
            },
          ],
        });
        self.echarts9.on('click', function(params) {
          console.log(params);
          self.dialogFormVisible = true;
          self.titles = '重点管理人员';
        });
      });
    },
  async  drawBars1() {
      try {
        const{data}  = await ForeignPopulation()
        // console.log(data)
         this.echart=data.date
         this.echart.forEach(item=>{
           this.echartName.push(item.name)
         })
         this.echart.forEach(item=>{
           this.echartNum.push(item.value)
         })
      } catch (error) {
        console.log(error)
      }
      let self = this;
      this.$nextTick(() => {
        self.echarts10.setOption({
          grid: {
            left: 0,
            right: 0,
            bottom: '23%',
            top: '1',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none',
            },
            formatter: function(params) {
              return params[0].name + ': ' + params[0].value;
            },
          },
          xAxis: {
            show: true,
            axisLabel: {
              show: true,
              rotate: 45,
              textStyle: {
                color: '#51C0D3',
                fontSize: 12,
              },
            },
            
            data:this.echartName,
          },
          dataZoom: {
    show: true,
    realtime: true,
    y: 150,
    height:10 ,
    start: 20,
    end: 30
},

          yAxis: {
            show: true,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },

            axisLabel: {
              show: false,
            },
          },
          
          series: [
            {
              name: 'hill',
              type: 'pictorialBar',
              barCategoryGap: '-130%',
              symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
              label: {
                show: true,
                position: 'top',
                distance: 1,
                color: '#fff',
                // fontWeight: 'bolder',
                fontSize: 12,
              },
              itemStyle: {
                normal: {
//                   color:  function(params) {//自定义设定柱状颜色
// var colorList = ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80"]; 
// return colorList[params.dataIndex];}
color: function (){ 
 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
 }
                },
                emphasis: {
                  opacity: 1,
                },
              },
              data: this.echartNum,
              z: 10,
            },
          ],
        });
        self.echarts10.on('click', function(params) {
          console.log(params);
          self.dialogFormVisible = true;
          self.titles = '外籍人员';
        });
      });
    },
  },
};
</script>
 
<style lang="scss">
.management {
  width: 50.5%;
  height: 4.6rem;
  margin-left: 0.06rem;
  margin-top: 0.3rem;

  .dd {
    margin-top: 0.01rem;
  }
}
</style>

 